<template>
  <div
    class="footer-subscribe footer-subscribe-bg-neutral-light"
    :class="{
      'footer-subscribe--is-campus': isCampus,
      'footer-subscribe--is-smaller': isSmaller,
    }"
  >
    <div class="footer-subscribe-title" v-html="subscribe_title"></div>
    <form
      class="footer-subscribe-form"
      :class="{ 'footer-subscribe-form-is-focus': isFocus }"
      @submit.prevent="checkForm"
      action="javascript:void(0);"
      autocomplete="off"
    >
      <input
        class="footer-subscribe-form-input"
        v-model="email"
        type="email"
        name="email"
        :placeholder="subscribe_lightbox?.placeholder"
        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
        required
        @focus="isFocus = true"
        @blur="isFocus = false"
      />
      <div class="footer-subscribe-form-button">
        <BtnSecondary
          :text="buttonText"
          typeForBtn="submit"
          :fillWidth="true"
          @showLightboxDonation="showLightboxDonation"
        />
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import BtnSecondary from './BtnSecondary.vue'

defineOptions({
  name: 'FooterSubscribe'
})

interface Props {
  isCampus?: boolean
  isSmaller?: boolean
  footer: any
}

const props = withDefaults(defineProps<Props>(), {
  isCampus: false,
  isSmaller: false,
  footer: {}
})

const emit = defineEmits(['showLightboxSubscribe', 'showLightboxDonation'])

const errors = ref<string[]>([])
const email = ref('')
const isFocus = ref(false)
const screenWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 768)

const subscribe_title = computed(() => {
  return props.footer?.subscribe_title
})

const subscribe_desktop_text = computed(() => {
  return props.footer?.subscribe_desktop_text
})

const subscribe_mobile_text = computed(() => {
  return props.footer?.subscribe_mobile_text
})

const subscribe_lightbox = computed(() => {
  return props.footer?.subscribe_lightbox
})

const buttonText = computed(() => {
  return screenWidth.value < 768 ? subscribe_mobile_text.value : subscribe_desktop_text.value
})

const validEmail = (val: string) => {
  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(val)
}

const openSubscribeLightBox = () => {
  emit('showLightboxSubscribe', { email: email.value })
}

const checkForm = () => {
  errors.value = []
  if (!email.value) {
    errors.value.push('Email required.')
  } else if (!validEmail(email.value)) {
    errors.value.push('Valid email required.')
  }

  if (!errors.value.length) {
    openSubscribeLightBox()
    email.value = ''
  }
}

const handleResize = () => {
  if (typeof window !== 'undefined') {
    screenWidth.value = window.innerWidth
  }
}

onMounted(() => {
  if (typeof window !== 'undefined') {
    screenWidth.value = window.innerWidth
    window.addEventListener('resize', handleResize)
  }
})

const showLightboxDonation = (data: any) => {
  emit('showLightboxDonation', data)
}
</script>

<style lang="scss" scoped>
/* Fallback CSS variables used when project SCSS variables are not available */
:root {
  --neutral-lightest: #f7f7fa;
  --blue: #0048e8;
  --teal: #008080;
}

.footer-subscribe-bg-neutral-light {
  background-color: var(--neutral-lightest);
}

.footer-subscribe {
  padding: 16px;
  max-width: 392px;
  border-radius: 4px;

  @media (max-width: 767.98px) {
    padding: 12px;
    max-width: 100vw;
    border-radius: 2px;
  }
}

.footer-subscribe-title,
.footer-subscribe-title ::v-deep p {
  font-size: 16px;
  line-height: 24px;
  color: var(--teal);
  margin-bottom: 16px;

  @media (max-width: 767.98px) {
    text-align: center;
    margin-bottom: 12px;
  }
}

.footer-subscribe-form {
  background-color: var(--neutral-lightest);
  padding: 4px 4.7px 4px 12px;
  display: flex;
  border: 1px solid var(--neutral-lightest);
  border-radius: 4px;

  @media (max-width: 767.98px) {
    border: none;
    flex-direction: column;
    padding: 0;
    background: none;
  }
}

.footer-subscribe-form-is-focus {
  border: 1px solid var(--blue);

  @media (max-width: 767.98px) {
    border: none;
  }
}

.footer-subscribe-form-input {
  flex-grow: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  padding: 0 8px 0 0;
  width: 100%;

  &::placeholder {
    font-size: 14px;
  }

  @media (max-width: 767.98px) {
    padding: 7px 11px;
    background-color: var(--neutral-lightest);
    border-radius: 4px;
    border: 1px solid var(--neutral-lightest);

    &:focus {
      border: 1px solid var(--blue);
    }
  }
}

.footer-subscribe-form-button {
  min-width: 140px;

  @media (max-width: 767.98px) {
    margin-top: 12px;
  }
}

.footer-subscribe--is-campus {
  @media (max-width: 1199.98px) {
    padding: 12px;
    max-width: 100vw;
    border-radius: 2px;
  }
}

.footer-subscribe--is-campus .footer-subscribe-title {
  @media (max-width: 1199.98px) {
    text-align: center;
    margin-bottom: 12px;
  }
}

.footer-subscribe--is-campus .footer-subscribe-form {
  @media (max-width: 1199.98px) {
    border: none;
    flex-direction: column;
    padding: 0;
    background: none;
  }
}

.footer-subscribe--is-campus .footer-subscribe-form-input {
  @media (max-width: 1199.98px) {
    padding: 7px 11px;
    background-color: var(--neutral-lightest);
    border-radius: 4px;
    border: 1px solid var(--neutral-lightest);

    &:focus {
      border: 1px solid var(--blue);
    }
  }
}

.footer-subscribe--is-campus .footer-subscribe-form-button {
  @media (max-width: 1199.98px) {
    margin-top: 12px;
  }
}

.footer-subscribe--is-smaller {
  max-width: 100%;
}

.footer-subscribe--is-smaller .footer-subscribe-form {
  border: none;
  flex-direction: column;
  padding: 0;
  background: none;
}

.footer-subscribe--is-smaller .footer-subscribe-form-input {
  padding: 7px 11px;
  background-color: var(--neutral-lightest);
  border-radius: 4px;
  border: 1px solid var(--neutral-lightest);

  &:focus {
    border: 1px solid var(--blue);
  }
}

.footer-subscribe--is-smaller .footer-subscribe-form-button {
  margin-top: 12px;
}
</style>
